<!--
 * @Date: 2022-07-04 09:54:33
 * @LastEditTime: 2022-07-12 22:39:57
-->
<template>
  <div id="uic-main">
    <h1 id="uic-title">修改用户信息</h1>
    <el-form :model="changeForm" ref="changeForm" :rules="changeUserInfo_rules" class="uic-form-main">
      <el-form-item prop="nickname" class="uic-form-item">
        <el-input v-model="changeForm.nickname" show-word-limit maxlength="20" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item prop="email" class="uic-form-item">
        <el-input v-model="changeForm.email" show-word-limit placeholder="输入邮箱地址（非必须）"></el-input>
      </el-form-item>
      <el-form-item prop="phone" class="uic-form-item">
        <el-input v-model="changeForm.phone" maxlength="11" placeholder="输入手机号（非必须）"></el-input>
      </el-form-item>
      <el-form-item prop="sex" class="uic-form-item">
        <el-radio-group v-model="changeForm.sex">
          <el-radio-button label="0">男</el-radio-button>
          <el-radio-button label="1">女</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="birth" class="uic-form-item">
        <el-date-picker
          v-model="changeForm.birth"
          type="date"
          placeholder="出生日期"
          value-format="yyyy-MM-dd"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item class="uic-form-item">
        <el-button @click="changeUserInfo" type="primary" id="uic-form-btn" @keydown.enter="changeUserInfo">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { changeUserInfo } from '@/api/user'

export default {
  name: 'changeUserInfoPanel',
  data () {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
        // 所以我就在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    return {
      changeForm: {
        nickname: '',
        sex: null,
        birth: null,
        email: null,
        phone: null
      },
      changeUserInfo_rules: {
        nickname: [{required: true, message: '昵称不可为空', trigger: 'blur'}, {min: 1, max: 20, message: '昵称不能为空或者多于20个字符', trigger: 'blur'}],
        sex: [{required: true, message: '请选择性别', trigger: 'change'}],
        birth: [{type: 'date', required: true, message: '请选择出生日期', trigger: 'change'}],
        email: [{validator: checkEmail, trigger: 'blur'}],
        phone: [{validator: checkPhone, trigger: 'blur'}]
      }
    }
  },
  mounted: function () {
    this.getUserInfo()
  },
  created: function () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      const { nickname, sex, birth, phone, email } = this.$store.state.userInfo
      this.changeForm.nickname = nickname
      this.changeForm.sex = sex
      this.changeForm.birth = birth
      this.changeForm.phone = phone
      this.changeForm.email = email
    },
    // submit (formName) {
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   })
    // },
    changeUserInfo: function () {
      // if (!this.submit('changeForm')) return
      changeUserInfo(this.changeForm)
        .then(res => {
          if (res.data.state === 200) {
            this.$message({
              type: 'success',
              message: '修改用户信息成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
      console.log(this.changeForm)
    }
  }
}
</script>

<style>
#uic-main {
  /* background: pink; */
  width: 100%;
  margin-top: 40px;
}
.uic-form-item {
  width: 80%;
}
.uic-form-main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#uic-form-btn {
  width: 100%;
}
#uic-title {
  margin-bottom: 20px;
}
</style>
